<template>
  <div class="admin-management">
  <Header/>
  <div class="job-management">
    <Sidebar/>
    <div class="main-content">
      <div v-if="showText">
        <el-card style="min-height: 500px;" >
          <div style="margin-bottom: 20px">
            <el-text type="danger" size="large" style="font-size: 30px; font-weight: bolder;  -webkit-user-select: none;
                    user-select: none;" >欢 迎 进 入 求 职 招 聘 管 理 系 统</el-text>
            <div style="margin-top: 20px">
              <el-text type="warning" size="default" style=" -webkit-user-select: none;
                    user-select: none;">给系统打个分吧！</el-text>
              <div>
                <el-rate v-model="value"
                         :colors="colors"
                         size="large"
                         :disabled="isReadonly"
                         @change="handleRateChange"/>
              </div>
            </div>
          </div>
          <el-image :src="imageSrc"
                    :fit="'contain'"
                    style="width: 60%;
                    height: 60%;
                    -webkit-user-select: none;
                    user-select: none;"/>
        </el-card>

      </div>
      <div>
        <router-view/>
      </div>
      <div class="footer">
        <Footer/>
      </div>
    </div>

    </div>

  </div>

</template>

<script>
import Sidebar from '@/views/index/components/sidebar.vue';
import Header from '@/views/index/components/adminHeader.vue';
import Footer from "@/views/index/components/footer.vue";
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

export default {
  components: {
    Sidebar,
    Header,
    Footer
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const showText = ref(true);
    const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
    const imageSrc =  require('@/assets/images/数据支持.png');
    const value = ref(0);
    const isReadonly = ref(false);

    const handleRateChange = (newValue) => {

      isReadonly.value = true; // 评分后设置为只读

      ElMessage.success(`感谢您对系统评分，您的评分是 ${newValue} ！`);
    };
    const checkSubRoutes = () => {
      const matched = router.currentRoute.value.matched;
      // Check if there are sub-routes
      showText.value = matched.length <= 1;
    };

    watch(
        () => route.fullPath,
        () => {
          checkSubRoutes();
        }
    );

    onMounted(() => {
      checkSubRoutes();
    });

    return {
      showText,
      imageSrc,
      colors,
      value,
      isReadonly,
      handleRateChange
    };
  }
};
</script>

<style scoped>
.footer {

}

.job-management {
  display: flex;
  height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
